<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>银行卡</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
	</head>
	<style type="text/css">
		.nav{height: 1.3rem;background: #fff;font-size: 0.4rem;}
		.settlement{height: 1.3rem;width: 3.4rem;margin-left: 0.17rem;}
		.line{height: 0.85rem;width: 1px;background: #e5e5e5;margin-left: 0.2rem;}
		.credit{height: 1.3rem;width: 3.4rem;margin-left: 0.17rem;}
		.active{border-bottom: solid 2px #0d6fb8;}
		.container{margin-top: 0.3rem;padding-top: 0.2rem;}
		.item{height: 1.95rem;width: 7.1rem;background: #fff;margin-left: 0.2rem;margin-top: 0.3rem;border-radius: 3px;padding-top: 0.3rem;}
		.item .header-text{height: 0.85rem;width: 3.5rem;margin-left: 0.3rem;}
		.item .header-text .img{height: 0.85rem;width:0.9rem;}
		.item .header-text .img-left{height: 0.85rem;width: 2.5rem;margin-left: 0.1rem;}
		.item .header-text .img-left .title{font-size: 0.32rem;font-weight: bold;}
		.item .header-text .img-left .title-nav{font-size: 0.26rem;color: #454545;margin-top: 0.1rem;}
		.item .header-text img{height: auto;width: 0.8rem;}
		.item .cardNumber{font-size: 0.3rem;height: 0.4rem;margin-top: 0.4rem;text-align: right;font-weight: bold;}
		.item .cardNumber p{margin-right: 0.4rem;}
	</style>
	<body>
		<!--头部header开始-->
		<header class="flex flex-align-center">
			<div class="left flex flex-align-center">
				<img src="img/arrleft.png" alt="" class="arrleft"/>我的
			</div>
			<div class="title">银行卡</div>
			<div class="right flex flex-pack-center flex-align-center">
				<img src="img/add.png"/>
			</div>
		</header><!--头部header结束-->
		<!--结算卡/信用卡导航nav开始-->
		<div class="nav flex flex-align-center">
			<div class="settlement flex flex-align-center flex-pack-center active">
				<p>结算卡</p>
			</div>
			<div class="line"></div>
			<div class="credit flex flex-align-center flex-pack-center">
				<p>信用卡</p>
			</div>
		</div><!--结算卡/信用卡导航nav结束-->
		<!--银行卡列表开始-->
		<div class="container">
			<div class="item">
				<div class="header-text flex">
					<div class="img flex flex-align-center">
						<img src="img/bankgd.png" alt="" />
					</div>
					<div class="img-left">
						<div class="title">邮政储蓄银行</div>
						<div class="title-nav">结算卡</div>
					</div>
				</div>
				<div class="cardNumber">
					<p>**** **** **** 0523</p>
				</div>
			</div>
			<div class="item">
				<div class="header-text flex">
					<div class="img flex flex-align-center">
						<img src="img/bankyz.png" alt="" />
					</div>
					<div class="img-left">
						<div class="title">邮政储蓄银行</div>
						<div class="title-nav">结算卡</div>
					</div>
				</div>
				<div class="cardNumber">
					<p>**** **** **** 0523</p>
				</div>
			</div>
		</div><!--银行卡列表结束-->
	</body>
	<script type="text/javascript" src="js/rem.js"></script>
	<script type="text/javascript" src="js/zepto.js"></script>
	<script type="text/javascript" src="js/template.js"></script>
	<script type="text/javascript" src="js/api.js"></script>
	<script type="text/javascript" src="js/common.js"></script>
	<script type="text/javascript" src="js/swiper-3.4.2.min.js"></script>
	<script type="text/javascript">
		$(function(){
			//结算卡点击事件
			$(".settlement").click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			});
			//信用卡点击事件
			$(".credit").click(function(){
				$(this).addClass('active').siblings().removeClass('active');
			});
		})
	</script>
</html>
